/// 滚动指示器效果
/// @see https://www.zhangxinxu.com/wordpress/2019/06/better-css-scroll-indicator/
%indicator {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right top, teal 50%, transparent 50%) no-repeat;
  background-size: calc(100% + 20px) calc(100% - 100vh + 5px);
  pointer-events: none;
  mix-blend-mode: darken; //darken混合模式的混合方式很好理解，两个颜色进行混合，哪个颜色深就使用哪个颜色？
  &::after {
    content: "";
    position: fixed;
    top: 5px;
    bottom: 0;
    inset-inline: 0;
    background: #fff;
    z-index: 1;
  }
}

// 纯CSS实现的透明方格效果
.transparentSquare {
  display: inline-block;
  padding: 300px;
  background-color: #fff;
  background-image: linear-gradient(
      45deg,
      #eee 25%,
      transparent 25%,
      transparent 75%,
      #eee 75%
    ),
    linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

// 流动的管道效果
.flow-twill {
  padding-right: 30%;
  height: calc(1.4142 * 20px);
  background: repeating-linear-gradient(
    45deg,
    teal,
    teal 10px,
    transparent 11px,
    transparent 19px,
    teal 20px
  );
  background-clip: content-box;
  animation: twill 1s linear infinite;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      rgba(0, 0, 0, 0.5),
      hsla(0, 0%, 100%, 0.5),
      rgba(0, 0, 0, 0.5)
    );
  }
}
@keyframes twill {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 calc(-1 * 1.4142 * 40px);
  }
}

// 文字的font-size大小根据个数不同自动变化实例页面
.changeFontSizebox {
  span {
    font-size: 40px;
    &:first-child {
      &:nth-last-child(n + 13),
      &:nth-last-child(n + 13) ~ span {
        font-size: 30px;
      }
      &:nth-last-child(n + 17),
      &:nth-last-child(n + 17) ~ span {
        font-size: 20px;
      }
      &:nth-last-child(n + 25),
      &:nth-last-child(n + 25) ~ span {
        font-size: 14px;
      }
    }
  }
}
// <textarea id="textarea" rows="5" placeholder="输入文字，看下面实时效果"></textarea>
// <p id="box" class="box"></p>
// textarea.addEventListener('input', function () {
//   box.innerHTML = this.value.split('').map(function (char) {
//       return '<span>' + char + '</span>';
//   }).join('');
// });
